<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流布局</title>
	<style type="text/css">
		.content{
			position: relative;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			width: 200px;
			margin-right: 10px;
			margin-top: 10px;
			transition: all 1s;
		}
		.h1{
			height: 200px;
			background-color: #f4b300;
		}

		.h2{
			height: 300px;
			background-color: #691BB8;
		}

		.h3{
			height: 400px;
			background-color: #006ac1;
		}
		.h4{
			height: 500px;
			background-color: #ccc;
		}
		</style>
</head>
<body>
	<!-- 宽度相同.高度不同.可以很好的穿插 -->
	<div class="content">
			<div class="item h1">
				1
			</div>
			<div class="item h3">
				2
			</div>
			<div class="item h2">
				3
			</div>
			<div class="item h1">
				4
			</div>
			<div class="item h1">
				5
			</div>
			<div class="item h3">
				6
			</div>
			<div class="item h3">
				7
			</div>
 			<div class="item h2">
				8
			</div>
    	<div class="item h1">
				9
			</div>
			<div class="item h3">
				10
			</div>
			<div class="item h3">
				11
			</div>
			<div class="item h3">
				12
			</div>
			<div class="item h2">
				13
			</div>
			<div class="item h2">
				14
			</div>
			<div class="item h3">
				15
			</div>
			<div class="item h2">
				16
			</div>
			<div class="item h1">
				17
			</div>
			<div class="item h4">
				18
			</div>
		</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>

	waterFull()

	$(window).resize(function(){
		waterFull()
	})


	// 封装一个函数可以随着页面变化而变化
	function waterFull(){
		//先得到元素的宽度
		var nodeWidth = $('.item').width()
		//在得到父元素的宽度
		var cntWidth = $('.content').width()
		//得到列数
		var cntlength = parseInt(cntWidth/nodeWidth)
		console.log(cntlength)
		//定义一个数组
		var itemArr = []
		//初始化数组
		for (var i = 0; i < cntlength; i++) {
			itemArr[i] = 0
		}
		//找数组最小值
		$('.item').each(function(){
			var minValue = Math.min.apply(null,itemArr)
			var minIndex = itemArr.indexOf(minValue) 
			//固定到某个位置 item
			$(this).css({
				top: itemArr[minIndex],
				left: $(this).outerWidth(true) * minIndex
			})

			itemArr[minIndex] += $(this).outerHeight(true)

		})

	}
	
</script>
</body>
</html>